<template>
  <div>
    <headerMidder title="我的跟帖"></headerMidder>
    <div class="item" v-for="(item,index) in  commentList" :key=index>
      <div class="date">2019-10-10</div>
      <div class="parent" v-if='item.parent'>
        <div class="name">{{item.parent.user.nickname}}</div>
        <div class="parentContent">{{item.parent.content}}</div>
      </div>
      <div class="mainContent">{{item.content}}</div>
      <div class="postOrigin">原文:{{item.post.title}}</div>
    </div>
  </div>
</template>

<script>
import headerMidder from "../components/headerMidder";
export default {
  components: {
    headerMidder
  },
  data(){
      return {
          commentList:[]
      }
  },
  mounted(){
      this.$axios({
          url:'user_comments',
          method:'get'
      }).then(res=>{
          console.log(res.data);
          this.commentList=res.data.data
      })
  }
};
</script>

<style lang="less" scoped>
.item {
  padding: 20px;
  font-size: 14px;
  border-bottom: 1px solid #eeee;
}
.date {
  color: #888;
}
.parent {
  margin-top: 2.778vw;
  padding: 5.556vw;
  color: #888;
  background: #eee;
  .parentContent {
    margin-top: 2.778vw;
  }
}
.mainContent {
  margin-top: 2.778vw;
}
.postOrigin {
  margin-top: 2.778vw;
  color: #888;
}
</style>